<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-3-限流函数-组合式</title>
</head>

<body>



    <!--载入vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

    <div id="Application">
        点击一次，两秒后可获取时间，多次点击无法获取时间
        <button @click="n_click">按钮</button>
    </div>
    <script>

        //定义组件
        var throttles = false
        function throttleTool(callback, timeout) {
            if (!throttles) {
                callback()
            } else {
                return;
            }
            throttles = true
            setTimeout(() => { throttles = false }, timeout)
        }

        const app = Vue.createApp({
            setup() {
                const throttle = Vue.ref(false)

                const click = () => {
                    if (!throttle.value) {
                        console.log(Date())
                    } else {
                        return;
                    }
                    throttle.value = true
                    //每两秒执行一次
                    setTimeout(() => {
                        throttle.value = false
                    }, 2000)
                };

                //自做限流函数
                const n_click = () => {
                    throttleTool(() => {
                        console.log(Date())
                    }, 2000)
                };

                return {
                    click,
                    n_click
                }

            }
        })
        app.mount("#Application")
    </script>

    <style>

    </style>


</body>

</html>